<template>
    <div
        class="dailyBasis"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <cardComponent pageTitle="公共服务类-->按日分期明细">
            <template slot="cardBody">
                <!-- 按日分期明细 -->
                <div class="dailyBasisMain">
                    <div class="container">
                        <!-- 人民币信息模块 -->
                        <el-card class="box-card">
                            <div class="infoList">
                                <el-row class="mainRow">
                                    <el-col :span="12">
                                        <span class="infoColLeft">按日贷款序号:</span>
                                        {{ getInforMation.MPNBR }}
                                    </el-col>
                                    <el-col :span="12">
                                        <span class="infoColLeft">按日贷款申请编码:</span>
                                        {{ getInforMation.APPREF }}
                                    </el-col>
                                </el-row>
                                <el-row class="mainRow">
                                    <el-col :span="12">
                                        <span class="infoColLeft">贷款申请日期:</span>
                                        {{ getInforMation.INPDATE }}
                                    </el-col>
                                    <el-col :span="12">
                                        <span class="infoColLeft">状态:</span>
                                        {{ getInforMation.STATUS | getSTATUS }}
                                    </el-col>
                                </el-row>
                                <el-row class="mainRow">
                                    <el-col :span="12">
                                        <span class="infoColLeft">所属贷款计划:</span>
                                        {{ getInforMation.CREDPID }}
                                    </el-col>
                                    <el-col :span="12">
                                        <span class="infoColLeft">商品编码:</span>
                                        {{ getInforMation.PRODID }}
                                    </el-col>
                                </el-row>
                                <el-row class="mainRow">
                                    <el-col :span="12">
                                        <span class="infoColLeft">币种:</span>
                                        {{ getInforMation.CURRNUM }}
                                    </el-col>
                                    <el-col :span="12">
                                        <span class="infoColLeft">按日贷款金额:</span>
                                        {{ getInforMation.MPAMT2.toFixed(1) }}
                                    </el-col>
                                </el-row>
                                <el-row class="mainRow">
                                    <el-col :span="12">
                                        <span class="infoColLeft">贷款剩余本金:</span>
                                        {{ getInforMation.REMPPL.toFixed(1) }}
                                    </el-col>
                                    <el-col :span="12">
                                        <span class="infoColLeft">贷款期数:</span>
                                        {{ getInforMation.MPMTHS2 }}
                                    </el-col>
                                </el-row>
                                <el-row class="mainRow">
                                    <el-col :span="12">
                                        <span class="infoColLeft">贷款息费:</span>
                                        {{ getInforMation.FEEAMT.toFixed(1) }}
                                    </el-col>
                                    <el-col :span="12">
                                        <span class="infoColLeft">当前已产息费金额:</span>
                                        {{ getInforMation.REMFEE }}
                                    </el-col>
                                </el-row>
                                <el-row class="mainRow">
                                    <el-col :span="12">
                                        <span class="infoColLeft">当前至贷款到期将产生息费:</span>
                                        {{ getInforMation.REMFEE2.toFixed(1) }}
                                    </el-col>
                                    <el-col :span="12">
                                        <span class="infoColLeft">贷款到期日:</span>
                                        {{ getInforMation.LOANDATE }}
                                    </el-col>
                                </el-row>
                                <el-row class="mainRow">
                                    <el-col :span="12">
                                        <span class="infoColLeft">贷款费率:</span>
                                        {{ getInforMation.LOANRATE.toFixed(1) }}
                                    </el-col>
                                    <el-col :span="12">
                                        <span class="infoColLeft">延期标识:</span>
                                        {{ getInforMation.DLYFLAG === '1' ? '是': '否' }}
                                    </el-col>
                                </el-row>
                                <el-row class="mainRow">
                                    <el-col :span="12">
                                        <span class="infoColLeft">提前还款应还息费:</span>
                                        {{ getInforMation.PREPAYINF.toFixed(1) }}
                                    </el-col>
                                    <el-col :span="12">
                                        <span class="infoColLeft">提前还款应还本金:</span>
                                        {{ getInforMation.PREPAYPPL.toFixed(1) }}
                                    </el-col>
                                </el-row>
                                <el-row class="mainRow">
                                    <el-col :span="12">
                                        <span class="infoColLeft">提前还款应还总额:</span>
                                        {{ getInforMation.PREPAYAMT.toFixed(1) }}
                                    </el-col>
                                    <el-col :span="12">
                                        <span class="infoColLeft">未还账单金额与当期息费:</span>
                                        {{ getInforMation.PREPAYSTM.toFixed(1) }}
                                    </el-col>
                                </el-row>
                            </div>
                        </el-card>
                    </div>
                </div>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { getDictSelectList } from '@/utils/Common';
import { DAILY_BASIS } from '@/utils/Contants';
import cardComponent from '@/components/cardComponent/cardComponent.vue';

export default {
    name: 'dailyBasis',
    components: {
        cardComponent,
    },
    data() {
        return {
            pageLoading: false, // 页面loading
            // 查询信息
            getInforMation: [],
            CURRENCYINFO: [],
            CURRNUM: '',
        };
    },
    async created() {
        this.CURRENCYINFO = await getDictSelectList('CURRENCY', this);
    },
    filters: {
        // 按日贷状态
        getSTATUS(val) {
            let status = '';
            const valStatus = val + ''.trim();
            DAILY_BASIS.forEach((item) => {
                if (valStatus === item.value) {
                    status = item.label;
                }
            });
            return status;
        },

    },
    // 取缓存信息
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004, // 默认卡信息
        cardList_3601: state => state.common.cardList_3601, // 卡列表信息
        cardAccountInfo_3001: state => state.common.cardAccountInfo_3001, // 卡账户信息
        customerInfo_3002: state => state.common.customerInfo_3002, // 客户信息
        defaultParams: state => state.common.defaultParams, // 接口默认参数
        pinFlag: state => state.common.pinFlag, // 是否密码检查标志
    }),

    mounted() {
        this.getInitData();
    },

    methods: {

        // 获取页面初始化数据
        getInitData() {
            this.pageLoading = true;
            const appBody = {
                CARDNBR: this.cardInfo_3004.CARDNO.trim(), // 卡号
                PINFLAG: this.pinFlag, // 是否检查密码标志 0-不检查
                MPNBR: '0000',
                APPREF: this.$route.params.APPREF,
            };
            const params = JSON.parse(JSON.stringify(this.defaultParams));
            // console.log(this.defaultParams, 'this.defaultParams')
            params.body.appHead.tranCode = '3105';
            params.body.appBody = appBody;

            // 跑 3105 交易
            this.$post.common.transPort(params).then((res) => {
                this.pageLoading = false;
                if (res.status === 200) { // 请求成功
                    const result = JSON.parse(res.data.jsonRes);

                    if (result.sysHead.rspCd === '000000') { // 交易成功
                        this.getInforMation = result.body.appBody;
                        // console.log(this.getInforMation, 'result -- 3105')
                        // 币种
                        this.getInforMation.CURRNUM = `${this.getInforMation.CURRNUM}`;
                        this.CURRENCYINFO.forEach((item) => {
                            if (item.code === this.getInforMation.CURRNUM) {
                                this.getInforMation.CURRNUM = item.label;
                            }
                        });
                    } else { // 交易失败
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else { // 请求失败
                    this.$alert('请求失败!', '提示', {
                        customClass: 'error', type: 'error',
                    });
                }
            });
        },

    },
};
</script>
<style lang="scss">
.dailyBasis {
    .dailyBasisMain {
        .el-card {
            .el-card__header {
                font-size: 20px;
                font-weight: 600;
                letter-spacing: 5px;
            }

            .el-card__body {
                padding: 10px;
            }
        }
    }
}
</style>
<style lang="scss">
.dailyBasis {
    min-height: 100%;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;

    //头部内容
    .tab-header {
        text-align: left;
        font-size: 16px;

        .remOrDollar {
            padding-left: 16px;
            color: red;
        }
    }
    //主体展示内容
    .dailyBasisMain {
        margin-top: 30px;
        overflow: hidden;

        .infoHead {
            padding-left: 16px;
            font-size: 16px;
            text-align: left;
            margin: 10px 0;

            .headerTitle {
                margin-bottom: 10px;
            }
            .accountStatus {
                color: red;
            }
        }

        .container {
            display: flex;
            justify-content: space-around;

            .box-card {
                min-width: 100%;
                .infoList {
                    font-size: 14px;
                    .mainRow {
                        text-align: left;
                        margin: 10px 0;

                        .infoColLeft {
                            display: inline-block;
                            width: 190px;
                            font-weight: 600;
                            text-align: right;
                            margin-right: 10px;
                        }
                    }
                }
            }
        }
    }
}
</style>
